<meta charset="UTF-8">
<title>部门管理</title>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>

<script type="text/javascript">

    var method='';//当前执行的方法名称

    $(function(){
        $('#grid').datagrid({

            //请求路径
            url:'dep_listByPage.action',
            columns:[[
                {field:'uuid',title:'部门编号',width:200},
                {field:'name',title:'部门名称',width:200},
                {field:'tele',title:'部门电话',width:200},
                {field:'-',title:'操作',width:100,formatter:function (value,row,index) {
                        return "<a href='#' onclick='deleteDep(\""+row.uuid+"\")'>删除</a>" +
                                " <a href='#' onClick='edit(\""+row.uuid+"\")'>修改</a>"; //此处需要转义，因为在网页上显示的时候里面的参数需要全部都暴露出来,
                                                                                            // 而不是当做一个整体处理的  \""+row.uuid+"\"
                    }}
            ]],
            singleSelect:true,
            //前端开启分页
            pagination : true,

            //添加按钮
            toolbar:[{
                iconCls:'icon-add',
                text:'增加',
                handler:function () {
                    method = "add";
                    $('#editForm').form('clear');
                    $('#editWindow').window('open')
                }
            }]
        });

        //查询
        $('#btnSearch').bind('click', function () {
            var formData= $('#searchForm').serializeJSON();
            //发起请求
            $('#grid').datagrid('load', formData);
        })

        //增加or修改
        $('#btnSave').bind('click', function () {
            var formData= $('#editForm').serializeJSON();
            $.ajax({
                url : 'dep_' + method + '.action',
                data : formData,
                type:'post',
                dataType:'json',
                success : function (value) {
                    if(value.status){
                        //关闭窗口
                        $('#editWindow').window('close');
                        //刷新表格
                        $('#grid').datagrid('reload');
                    }
                    $.messager.alert('提示', value.message );
                }
            })

        })


    });


    
    function deleteDep(id) {
        $.messager.confirm('提示信息 ','确定要删除吗？',function(r){
            $.ajax({
                url:'dep_delete.action?id='+id,
                dataType:'json',
                success:function (value) {
                    if(value.status){
                        $('#grid').datagrid('reload');//刷新
                    }
                    $.messager.alert('提示信息',value.message);
                }
            })
        })
    };


    //修改
    function edit(id) {
        $('#editWindow').window('open');
        $('#editForm').form('clear');
        $('#editForm').form('load', 'dep_get.action?id=' +id);
        method = 'update';
    }

    
    
</script>

</head>
<body>

<!-- 条件查询表单 -->
<form id="searchForm">
    部门名称：<input name="dep.name">
    部门电话：<input name="dep.tele">
    <button type="button" id="btnSearch" >查询</button>
</form>

<table id="grid"></table>


<!-- 编辑窗口 -->
<div id="editWindow" class="easyui-window" title="部门编辑" style="width: 300px;height: 200px" data-options="closed:true">
    <form id="editForm">
        <input name="dep.uuid" type="hidden">
        <table>
            <tr>
                <td>部门名称</td>
                <td><input name="dep.name"></td>
            </tr>
            <tr>
                <td>电话</td>
                <td><input name="dep.tele"></td>
            </tr>
        </table>
        <button type="button" id="btnSave" >保存</button>
    </form>
</div>


</body>
</html>